<template>
	<div style="height:100%;width:100%" class="workspace">
		<el-container ref="listWarp" style="height: 100%;background-color:#fafafa">
			<el-aside width="230px" class="left" style="background-color:#fff;height:300px">
				<el-container class="h100">
					<el-header class="top" height="45px" style="text-indent: 5px;">
						<div style="float: left;margin-left:5px;">
							<!-- <svg-icon slot="prefix" icon-class="role" style="color: #409EFF;" /> -->
						</div>
						<span>账户中心</span>
					</el-header>
					<el-main class="pd0 h100" style="padding:0">
						<div v-for="(item,index) in DataList" @click="(val)=>funSelectData(item,index)" ref="tab" :class="index==active?'item on':'item' "
						 :key="item.id">
							<span class="name">
								<svg-icon slot="prefix" style="margin-right:5px" :icon-class="item.icon" />
								{{item.name}}
							</span>
						</div>
					</el-main>
				</el-container>
			</el-aside>
			<div class="h100" style="background-color:#fff;margin-left:15px;border-top: 2px solid #f57d0d;padding:0;height:100%;width: 100%;"
			 v-show="active==1">
				<el-header height="45px" style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);line-height:45px">
					<span class="head-title">安全设置</span>
				</el-header>
				<el-container style="padding:15px">
					<div class="flex">
						<div style="width: 60px;margin-left: 25px;">
							<svg-icon slot="prefix" style="color:#E6A23C;margin-right:5px;font-size: 30px;" icon-class="dlmm" />
						</div>
						<div>
							<p style="font-size:16px;font-weight:400;color:#333333;margin: 5px 0;">登录密码</p>
							<p style="margin: 5px 0;color: #656565;">安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。</p>
						</div>
					</div>
				</el-container>
				<div>
					<el-form :model="loginForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="账号" prop="account" style="width:600px">
							<el-input v-model="loginForm.account" disabled></el-input>
						</el-form-item>
						<el-form-item label="原密码" prop="password3" style="width:600px">
							<el-input type="password" v-model="loginForm.password3" maxlength="50"></el-input>
						</el-form-item>
						<el-form-item label="新密码" prop="password" style="width:600px">
							<el-input type="password" maxlength="50" v-model="loginForm.password" placeholder="要求6-10位，包含数字、小写字母、大写字母及特殊字符中四选二"></el-input>
						</el-form-item>
						<el-progress :percentage="passwordPercent" style="width: 535px; margin-left: 101px" :status="passwordPercentFormat"></el-progress>
						<el-form-item label="确认密码" prop="password2" style="width:600px">
							<el-input type="password" maxlength="50" v-model="loginForm.password2" placeholder="请再次输入新密码"></el-input>
						</el-form-item>

						<el-form-item>
							<el-button :loading="loading" class="btn" size="small" @click="submitForm('ruleForm')" style="color:#fff;width: 90px;">确定</el-button>
						</el-form-item>
					</el-form>
				</div>
				<p class="line-p"></p>
				<el-container style="padding:15px">
					<div class="flex">
						<div style="width: 60px;margin-left: 25px;">
							<svg-icon slot="prefix" style="color:#E6A23C;margin-right:5px;font-size: 30px;" icon-class="sjbd" />
						</div>
						<div>
							<p style="font-size:16px;font-weight:400;color:#333333;margin: 5px 0;">手机绑定</p>
							<p style="margin: 5px 0;color: #656565;">
								您已绑定了手机
								<span style="color:#F57D0D">{{userInfo.mobile | mobileFilter}}</span> [您的手机为安全手机，可以找回密码]
							</p>
						</div>
					</div>
				</el-container>
				<div>
					<el-form :model="mobileForm" :rules="mobileRules" ref="mobileRuleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="手机号码" prop="mobile" style="width:600px">
							<el-input v-model="mobileForm.mobile"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button :loading="loading1" class="btn" size="small" @click="submitMobileForm('mobileRuleForm')" style="color:#fff;width: 90px;">确定</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-container>
	</div>
</template>

<script>
	import {
		changePsw2,
		saveOrUpdate
	} from "@/api/login";
	import {
		validateEmail,
		validateMobile
	} from "@/itsoftUI/utils/validate";
	export default {
		filters: {
			mobileFilter(val) {
				let reg = /^(.{3}).*(.{4})$/;
				return val.replace(reg, "$1****$2");
			},
		},
		name: "index",
		data() {
			return {
				active: "0",
				DataList: [{
						name: "账户信息",
						icon: "zhxx"
					},
					{
						name: "安全设置",
						icon: "aqsz"
					},
					{
						name: "授权信息",
						icon: "sqxx"
					},
					{
						name: "访问记录",
						icon: "fwjl"
					},
				],
				userInfo: {},
				loading: false,
				loading1: false,
				loginForm: {
					account: "",
					name: "",
					mobile: "",
					password: "",
					password2: "",
					password3: "",
				},
				mobileForm: {
					mobile: "",
				},
				mobileRules: {
					mobile: [{
						required: true,
						validator: validateMobile,
						trigger: "blur",
					}, ],
				},
				rules: {
					mobile: [{
						required: true,
						validator: this.validateConfirmMobile,
						trigger: "blur",
					}, ],
					password: [{
						required: true,
						validator: this.validatePassword,
						trigger: ["blur", "change"],
					}, ],
					password2: [{
						required: true,
						validator: this.validateConfirmPassword,
						trigger: ["blur", "change"],
					}, ],
					password3: [{
						required: true,
						message: "请填写原密码",
						trigger: "change"
					}, ],
				},
				passwordPercent: 0,
				passwordPercentFormat: "exception",
			};
		},
		methods: {
			validatePassword(rule, value, callback) {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					//6-20位包含字符、数字和特殊字符
					let ls = 0;
					if (this.loginForm.password !== "") {
						if (this.loginForm.password.match(/([a-z])+/)) {
							ls++;
						}
						if (this.loginForm.password.match(/([0-9])+/)) {
							ls++;
						}
						if (this.loginForm.password.match(/([A-Z])+/)) {
							ls++;
						}
						if (
							this.loginForm.password.match(/([\W])+/) &&
							!this.loginForm.password.match(/(![\u4E00-\u9FA5])+/)
						) {
							ls++;
						}
						if (this.loginForm.password.match(/([\u4E00-\u9FA5])+/)) {
							callback(new Error("不能包含中文字符"));
							ls = 0;
						}
						if (
							this.loginForm.password.length < 6 ||
							this.loginForm.password.length > 20
						) {
							callback(
								new Error(
									"要求6-20位,包含数字、小写字母、大写字母以及特殊字符中四选二"
								)
							);
							ls = 0;
						}
						this.passwordPercentFormat = "exception";
						switch (ls) {
							case 0:
								this.passwordPercent = 0;
								callback(
									new Error(
										"要求6-20位,包含数字、小写字母、大写字母以及特殊字符中四选二"
									)
								);
								break;
							case 1:
								this.passwordPercent = 66;
								callback(
									new Error(
										"要求6-20位,包含数字、小写字母、大写字母以及特殊字符中四选二"
									)
								);
								break;
							case 2:
								// this.passwordPercent = 66;
								// callback(
								//   new Error(
								//     "要求6-20位,包含数字、小写字母、大写字母以及特殊字符中四选三"
								//   )
								// );
								this.passwordPercentFormat = "success";
								this.passwordPercent = 100;
								break;
							case 3:
							case 4:
								this.passwordPercentFormat = "success";
								this.passwordPercent = 100;
								break;
							default:
								this.passwordPercent = 0;
								break;
						}
					}
					callback();
				}
			},
			validateConfirmPassword(rule, value, callback) {
				if (value === "") {
					callback(new Error("请重新输入密码"));
				} else {
					if (value !== this.loginForm.password) {
						callback(new Error("两次输入的密码不一致"));
					}
					callback();
				}
			},
			validateConfirmMobile(rule, value, callback) {
				if (value === "") {
					callback(new Error("请重新注册时所留手机号码"));
				} else {
					if (value !== this.userInfo.mobile) {
						callback(new Error("手机号码有误"));
					}
					callback();
				}
			},
			funDelData() {},
			funSelectData(val, index) {
				this.active = index;
			},
			submitForm(formName) {
				this.loading = true;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						changePsw2(
								this.loginForm.password3,
								this.loginForm.password
							)
							.then((res) => {
								if (res.status == "success") {
									this.loading = false;
									this.$message.success("修改成功");
									this.$refs[formName].resetFields();
									this.$itsoftUI.logout();
								}
							})
							.catch((error) => {
								this.loading = false;
							});
					} else {
						this.loading = false;
						return false;
					}
				});
			},
			submitMobileForm(formName) {
				this.loading1 = true;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						saveOrUpdate(JSON.stringify(this.mobileForm))
							.then((res) => {
								if (res.status == "success") {
									this.loading1 = false;
									this.$message.success("修改成功");
									this.$refs[formName].resetFields();
									this.$itsoftUI.logout();
								}
							})
							.catch((error) => {
								this.loading1 = false;
							});
					} else {
						this.loading1 = false;
						return false;
					}
				});
			},
			getUserInfo() {
				this.$itsoftUI.getUserInfo().then((res) => {
					this.userInfo = res;
					this.loginForm.account = res.account;
					this.loginForm.name = res.name;
					this.loginForm.id = res.id;
					this.mobileForm.id = res.id;
				});
			},
		},
		created() {
			this.getUserInfo();
			if (this.$route.query.type) {
				this.active = this.$route.query.type;
			}
		},
		watch: {
			$route: function() {},
		},
	};
</script>
<style lang="scss" scoped>
	.btn {
		background-image: linear-gradient(to right, #fbaf07, #f57a0d);
	}

	.line-p {
		width: 90%;
		margin: 15px auto;
		height: 1px;
		background: rgba(0, 0, 0, 0.1);
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.head-title {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.left {
		//   background-color: #f1f1f1;
		border-top: 2px solid #f57d0d;

		.top {
			position: relative;
			line-height: 45px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			color: #666666;

			span {
				font-size: 13px;
				font-weight: bold;
				padding-left: 5px;
			}

			i {
				font-weight: bold;
				position: absolute;
				top: 15px;
				right: 20px;
				cursor: pointer;

				&:hover {
					color: #409eff;
				}
			}
		}

		.item {
			position: relative;
			// float: left;
			width: 99%;
			height: 50px;
			text-indent: 20px;
			cursor: pointer;

			span {
				float: left;
				width: 175px;
				height: 45px;
				line-height: 42px;
				padding-left: 25px;
			}

			.name {
				margin-top: 5px;
				overflow: hidden;
			}

			.remark {
				font-size: 12px;
				color: #999999;
				overflow: hidden;
			}

			i {
				position: absolute;
				top: 20px;
				left: 5px;
				color: #666666;
				display: block;
				cursor: pointer;
			}

			&:hover:not(.on) {
				background-color: #f7f7f7;
			}
		}

		.on {
			background-color: #fff3ea;
			cursor: default !important;
			border-left: 2px solid #f57d0d;
			color: #f57d0d !important;

			i {
				display: block;
			}
		}
	}

	.line {
		float: left;

		.el-divider__text {
			font-weight: bold !important;
			color: #333333;
			font-size: 13px;
		}
	}

	.formitem {
		color: #606266;
		float: left;
		height: 80px;
		line-height: 80px;
		font-size: 13px;
		width: calc(100% - 2px);
		border: 1px solid #dcdfe6;
		border-bottom: 0px solid #dcdfe6;

		.label {
			float: left;
			width: 60px;
			color: #888888;
			text-align: right;
			padding-right: 10px;
		}

		.input {
			float: left;
		}
	}

	.btn {
		text-align: center;
		float: left;
		width: 100%;
		margin-top: 10px;

		.el-button {
			width: 100px;
			margin-right: 60px;
		}
	}

	.rolestable {
		background-color: #dcdfe6;
		width: 100%;

		tr {}

		td {
			padding: 6px 10px;
			background-color: #ffffff;
		}

		.name {
			font-size: 13px;
			font-weight: bold;
			text-align: center;
			color: #606266;
		}

		.roles {
			font-size: 13px;
		}

		.tdbk {
			background-color: #f7f7f7 !important;
		}
	}
</style>
